<template>
  <div id="good">
    <ul v-for="item in userInfo" :key="item.id">
      <li>姓名：{{ item.username }}</li>
      <li>性别：{{ item.sex }}</li>
      <li>年龄：{{ item.age }}</li>
    </ul>
    <!-- 把拿到的用户信息显示在页面中 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: [],
      //定义变量保存获取到的用户信息
    };
  },
  computed: {},
  mounted() {
    this.getUserInfo();
  },
  //在页面加载时就请求用户信息
  methods: {
    async getUserInfo() {
      let result = await this.$http("/getuserinfo", "get");
      if (!result) {
        console.log("莫有数据");
        return;
      }
      this.userInfo = result.userInfo;
      // 将得到的数据赋值给定义的data  userInfo,这里使用了async和await执行异步操作，跟之前的写法效果一样
    },
    //请求用户信息方法
  },
};
</script>
<style lang="scss">
#good {
  width: 1000px;
  margin: 0 auto;
  .around {
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    border-bottom: 1px solid #ccc;

    span {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>
